<!-- 废弃 -->

<script setup lang="ts">
  import { ref, defineEmits, computed, watch, onMounted, nextTick } from 'vue';
  import { Notification } from '@arco-design/web-vue';
  import { useBooleanStore } from '@/store';
  import {
    cacheList,
    callSortBox,
    cleanWaitingTask,
  } from '@/api/sorting-matching';

  const emit = defineEmits(['updateArray']);
  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });
  // 表单查询数据
  // const aoCode = ref('');
  // const packageCode = ref('');
  // const itemCode = ref('');
  // const productCode = ref('');

  // const batchNo = ref('');
  // const startPlaneNo = ref('');
  // const isSort = ref('');
  // const state = ref('');

  // const deliveryState = ref('');
  // const weekStartTime = ref('');
  // const weekEndTime = ref('');
  // const dailyStartTime = ref('');

  // const dailyEndTime = ref('');
  // const isDownDaily = ref('');
  // const isDownWeek = ref('');
  // const station = ref('');

  const pageSize = ref<number>(10);
  const pageNumber = ref<number>(1);
  const scanInput = ref<any>('');
  const scanCode = ref<string>('');
  // 托盘号
  const palletCode = ref<string>('');
  // 箱号
  const workBinCode = ref<string>('');

  // // 发送搜索数据
  // const flowQueryData = ref({
  //   searchParams: computed(() => ({
  //     aoCode: aoCode.value,
  //     packageCode: packageCode.value,
  //     itemCode: itemCode.value,
  //     productCode: productCode.value,
  //     batchNo: batchNo.value,
  //     startPlaneNo: startPlaneNo.value,
  //     isSort: isSort.value,
  //     state: state.value,
  //     deliveryState: deliveryState.value,
  //     weekStartTime: weekStartTime.value,
  //     weekEndTime: weekEndTime.value,
  //     dailyStartTime: dailyStartTime.value,
  //     dailyEndTime: dailyEndTime.value,
  //     isDownDaily: isDownDaily.value,
  //     isDownWeek: isDownWeek.value,
  //     station: station.value,
  //   })),
  //   pageParameter: computed(() => ({
  //     rows: pageSize.value,
  //     page: pageNumber.value,
  //   })),
  // });
  // 表格数据
  async function handleSearch() {
    const newData = await cacheList({});
    emit('updateArray', newData);
  }

  // 执行任务
  async function callSort() {
    const data = await callSortBox('');
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
  }
  // 清理等待任务
  async function cleanWaiting() {
    const data = await cleanWaitingTask({});
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
  }

  // 更换托盘
  function showReplaceToolView() {
    if (booleanStore.sortingList.length !== 1) {
      Notification.error({
        title: '失败',
        content: '请勾选一条需要更换托盘的数据',
        closable: true,
      });
      // return;
    }
    // 打开弹框
    booleanStore.toggleBool(5);
  }

  // 扫码操作
  async function scanSubmit() {}

  onMounted(() => {
    nextTick(() => {
      scanInput.value.focus();
    });
    handleSearch();
  });
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 15) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });
  watch(
    () => booleanStore.update,
    () => {
      if (booleanStore.num6 === 9) handleSearch();
    }
  );
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">操作</div>
    </template>

    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div>
          <a-input
            ref="scanInput"
            v-model="scanCode"
            placeholder="请输入缓存箱/托盘码/条码"
            size="large"
            @keyup.enter="scanSubmit"
          />
        </div>
      </a-col>
      <a-col :span="18">
        <a-button type="primary" size="large" @click="callSort"
          >执行任务</a-button
        >
        <a-button
          type="primary"
          class="btn-reset"
          size="large"
          @click="cleanWaiting"
          >清理等待任务</a-button
        >
        <a-button
          type="primary"
          class="btn-reset"
          size="large"
          @click="showReplaceToolView"
          >更换托盘</a-button
        >
        <a-button
          type="primary"
          class="btn-reset"
          size="large"
          @click="booleanStore.toggleBool2(6)"
          >查看缓存箱</a-button
        >
        <a-button type="primary" class="btn-reset" size="large"
          >查看工作包规则</a-button
        >

        <a-button
          type="primary"
          class="btn-reset"
          size="large"
          @click="booleanStore.toggleBool2(19)"
          >分拣操作页面</a-button
        >
      </a-col>
    </a-row>
    <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div class="flex-box"
          ><span>托盘号：</span>
          <span class="font-size">{{ palletCode }}</span>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="flex-box">
          <span>箱子号：</span>
          <span class="font-size">{{ workBinCode }}</span>
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped>
  .margin-top {
    margin-top: 10px;
  }
  .btn-group {
    float: right;
    margin-top: 15px;
  }

  .btn-reset {
    margin-left: 10px;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .div-tips {
    align-items: center;
    text-align: center;
    color: #999;
  }
  .flex-box {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  .font-size {
    font-size: 18px;
    font-weight: bold;
  }
</style>
